/**
 * 1. 创建 Context 最好放置到单独的 js 文件中，作为模块来导出
 *    因为 Context 在多个组件中需要引入使用
 *
 * 后代组件如何修改 Provider 提供下来的值？
 *  Provider 可以提供一个 函数出去，
 *  后代组件去执行这个函数。
 */

import React from "react";

// 创建 context 对象
const MyContext = React.createContext();

// Hello 组件
class Hello extends React.Component {
  render() {
    return (
      <MyContext.Consumer>
        {(value) => {
          console.log("value", value);
          return (
            <div>
              <h4>Hello - {value.name}</h4>
              <button onClick={() => value.fn()}>点我</button>
            </div>
          );
        }}
      </MyContext.Consumer>
    );
  }
}

// App 组件
class App extends React.Component {
  state = {
    name: "张三",
  };

  changeName = () => {
    console.log("changeName");
    this.setState({
      name: this.state.name + "~",
    });
  };

  render() {
    return (
      <MyContext.Provider
        value={{ name: this.state.name, fn: this.changeName }}
      >
        <div>
          <h1>App</h1>
          <hr />
          <Hello />
        </div>
      </MyContext.Provider>
    );
  }
}

export default App;
